<template>
  <div class="custom-title" :style="getStyle">
    <div
      v-if="showLine"
      class="title-line"
      :style="{
        backgroundColor: lineColor,
        width: lineWidth,
        height: fontSize - 2 + 'px',
        borderRadius: lineRadius,
      }"
    />
    <div
      class="title-text"
      :style="{
        color: fontColor,
        fontSize: fontSize + 'px',
        justifyContent: titleAlign,
        fontWeight: fontWeight,
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, ref, computed } from 'vue';

const props = withDefaults(
  defineProps<{
    showLine: boolean;
    showBorderLine: boolean;
    lineColor: string;
    lineWidth: string;
    lineRadius: string;
    fontColor: string;
    fontSize: number;
    fontWeight: string;
    backgroundColor?: string;
    titleAlign: string;
    paddingTop?: number;
  }>(),
  {
    showLine: true,
    showBorderLine: false,
    lineColor: '#409EFF',
    lineWidth: '3px',
    lineRadius: '3px',
    fontColor: '#303133',
    fontSize: 14,
    fontWeight: 'normal',
    backgroundColor: undefined,
    titleAlign: 'left',
    paddingTop: 0,
  },
);

const getStyle = computed(() => {
  const hasBackground = props.backgroundColor != null && props.backgroundColor !== '';
  const paddingTop = props.paddingTop;
  let borderBottom = props.fontSize * 0.8;
  if (props.showBorderLine && !hasBackground) {
    borderBottom = 8;
  }
  return {
    backgroundColor: props.backgroundColor,
    'border-bottom': props.showBorderLine ? '1px solid #DCDFE6' : 'none',
    'padding-top': (hasBackground ? props.fontSize * 0.8 : paddingTop || 0) + 'px',
    'padding-bottom': (props.showBorderLine || hasBackground ? borderBottom : 0) + 'px',
    'padding-left': (hasBackground ? props.fontSize * 1.1 : 0) + 'px',
    'padding-right': (hasBackground ? props.fontSize * 1.1 : 0) + 'px',
  };
});
</script>

<style scoped>
.custom-title {
  display: flex;
  align-items: center;
  border-radius: 3px;
}
.title-line {
  border-radius: 1px;
  margin-right: 6px;
}
.title-text {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  height: 1;
  line-height: 1;
  font-weight: 500;
}
</style>
